.avatar-group {
  display: flex;
  flex-direction: row; // 从左到右排列
  align-items: center;
  justify-content: flex-start; // 左对齐

  .avatar-item {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;

    &:first-child {
      margin-left: 0; // 第一个元素没有左边距
    }

    &:hover {
      transform: translateY(-2px);
      z-index: 100 !important; // 确保悬停时在最上层
    }
  }

  // "更多"头像的样式 - 三个点
  .avatar-more {
    font-weight: 500;

    .dots-container {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f0f0f0; // 更改为浅灰色背景，提高对比度
      border-radius: 50%;
      border: 1px solid rgba(69, 81, 229, 0.12); // 更明显的边框
      //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加轻微阴影

      .dot {
        width: 5px; // 增大点的尺寸
        height: 5px; // 增大点的尺寸
        background-color: #555; // 更深的颜色，提高对比度
        border-radius: 50%;
        margin: 0 2px;

        &:nth-child(2) {
          width: 5px; // 确保所有点大小一致
          height: 5px;
        }
      }
    }

    &:hover {
      .dots-container {
        background-color: #e6e6e6; // 悬停时背景色变深

        .dot {
          background-color: #333; // 悬停时点的颜色变深
        }
      }
    }
  }

  // 边框样式 - 只在启用边框时应用
  &.with-border {
    .user-avatar,
    .dots-container {
      border: 2px solid #fff;
    }
  }

  .avatar-rest-count {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #efeff6;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    color: rgba(18, 18, 18, 0.7);
  }
}
